<template>
  <section class="cms-body flex">
    <!-- 返回组件 -->
    <a class="cms-back" href="javascript:void(0)" @click="back"></a>
    <div class="cms-content">
      <el-form ref="form" :model="dataInfo" :rules="rules" class="cms-form" label-width="162px" v-loading="loading">

        <el-form-item label="话题名称" class="flex-50 " prop="problemTopicName" v-if="isType('save')">
          <el-input class="cms-width" v-model="dataInfo.problemTopicName" :disabled="isType('save')"></el-input>
        </el-form-item>
        <el-form-item label="Id" class="flex-50 " prop="problemId" v-if="isType('update')">
          <el-input class="cms-width" v-model="dataInfo.problemId" :disabled="isType('update')"></el-input>
        </el-form-item>

        <el-form-item label="问题名称" class="flex-50 " prop="problemName">
          <el-input class="cms-width" v-model="dataInfo.problemName"></el-input>
        </el-form-item>

        <!-- 单选框 -->
        <el-form-item label="是否置顶" class="flex-50 " prop="isTop">
          <el-radio-group v-model="dataInfo.isTop">
            <el-radio :label="0">否</el-radio>
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="是否展示" class="flex-50" prop="isSlider">
          <el-radio-group v-model="dataInfo.isDisplay">
            <el-radio :label="1">展示</el-radio>
            <el-radio :label="0">不展示</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="问题排序" class="flex-50 " prop="problemSort">
          <el-input class="cms-width" v-model="dataInfo.problemSort"></el-input>
        </el-form-item>

        <el-form-item label="封面图" class="flex-50" prop="problemImg">
          <cms-upload :src="dataInfo.problemImg" :isMark="false" @change="getProblemImg" uploadPath="images"></cms-upload>
          <span style="color:red">建议上传图片尺寸 275*150</span>
        </el-form-item>

        <el-form-item label="内容" class="flex-100 " prop="content">
          <cms-editor :defaultMsg="dataInfo.content" @ready="getUeditor"></cms-editor>
        </el-form-item>

      </el-form>

      <div class="form-footer">
        <el-button type="warning" v-if="isType('save')" @click="add(true)" v-perms="'/problem/save'">提交并继续添加
        </el-button>
        <el-button type="primary" v-if="isType('save')" @click="add(false)" v-perms="'/problem/save'">添加</el-button>
        <el-button type="primary" v-if="isType('update')" @click="update()" v-perms="'/problem/update'">修改
        </el-button>
        <el-button type="info" @click="$reset">重置</el-button>
        <span class="gray" v-if="isType('save')"> 选择“提交并继续添加”按钮会停留在添加页面；选择“提交”按钮后将跳转到对应的列表页</span>
      </div>

    </div>
  </section>
</template>
<script>
  import formMixins from "@/mixins/form";
  import axios from "axios";
  import va from "@/rules";

  export default {
    mixins: [formMixins],
    data() {
      let required = va.required("此项必填");
      let number = va.number("只能输入数字");
      return {
        params: this.$route.query, //前一个页面带过来的数据
        rules: {
          problemName: [required],
          isTop: [number],
          problemSort: [number]
        },
        ue: [],
        loading: true,
        parentId: '',
        dataInfo: {
          problemId: '',
          problemName: '',
          problemTopicId:'',
          isTop: 0,
          isDisplay:0,
          problemSort: '',
          content: '',
          problemImg: ''
        }
      };
    },
    methods: {
      back() {
        this.routerLink("/problem/pageList", "pageList", this.parentId);
      },
      getProblemImg(url, index, pIndex) {
        this.dataInfo.problemImg = url;
      },
      getUeditor(ue, index) {
        this.ue[index] = ue; //获取ue实例
      },
      getDataInfo(problemId, type) {
        this.dataInfo.problemTopicId=this.params.problemTopicId;
        this.dataInfo.problemTopicName=this.params.problemTopicName;
        if (type == 'update') {
          axios.post(this.$api.problemGet, {problemId: problemId}).then(res => {  //获取频道默认信息
            console.log(res)
            this.dataInfo = res.body;
          });
        }
        this.loading = false;

      },
      reset() {
        window.location.reload();
      },
      add(state) {
        this.dataInfo.content=this.ue[0].getContent();
        this.saveDataInfo(state, this.$api.problemSave, this.dataInfo, "pageList");
      },
      update() {
        let form = this.$refs["form"];
        form.validate(valid => { //验证方法
          if (valid) {
            this.loading = true;
            this.dataInfo.content=this.ue[0].getContent();
            axios.post(this.$api.problemUpdate, this.dataInfo).then(res => {
              if (res.code == "200") {
                this.successMessage("修改成功");
                setTimeout(() => {
                  this.routerLink("/problem/pageList", "pageList", this.parentId);
                }, 1000);
              }
              this.loading = false;
            }).catch(error => {
              console.log(error);
              this.loading = false;
            });
          } else {
            return false;
          }
        });
      }
    },
    created() {
      this.$store.dispatch("setCollapse", false); //收缩状态栏
      this.getDataInfo(this.id, this.type);
    },
    mounted() {
      let clientHeight = document.body.clientHeight
      $('.cms-body').css('minHeight', clientHeight - 110 + 'px')
    }
  };
</script>

<style scss scoped>
</style>
